<template>
  <div class="detail">
  <main>
   <div class="up">
   <CategoryHeadVue id="head"></CategoryHeadVue>
   <van-swipe @change="onChange">
      <van-swipe-item><img :src="xiangying.img1"  class="head-img"></van-swipe-item>
      <van-swipe-item><img :src="xiangying.img2"  class="head-img"></van-swipe-item>
      <van-swipe-item><img :src="xiangying.img3"  class="head-img"></van-swipe-item>
      <van-swipe-item><img :src="xiangying.img4"  class="head-img"></van-swipe-item>
    <template #indicator>
      <div class="custom-indicator"><span>{{ current + 1 }}</span>/4</div>
      </template>
   </van-swipe>
   <hgroup>
      <span class="price">￥{{xiangying.originprice}}</span>
      <span class="sale">销量：{{xiangying.sales}}</span>
   </hgroup>
   <div class="xinxi">
      <span class="brand">{{xiangying.brand}}</span>
      <span class="category">{{xiangying.category}}</span>
      <span class="title">{{xiangying.proname}}</span>
   </div>
  </div>
  <AddersVue class="adders"></AddersVue>
  <div class="like">
   <div class="cai">
      <h4>猜你喜欢</h4>
   </div>
   <div class="detail-box">
      <div v-for="item in productionLike" :key="item.proid" @click="goGoodsDetail(item.proid)">
      <img :src="item.img1"/>
      <p class="title-like">{{item.proname}}</p>
      <p class="price">¥{{item.originprice}}</p>
    </div>
   </div>
  </div>
  </main>
  <div class="down">
   <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" :text="collectText" :color="collectColor"  @click="collect(xiangying)"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="add"/>
   </van-goods-action>
  </div>
  </div>
</template>
<script>
import axios from 'axios';
import CategoryHeadVue from '@/components/Category-head.vue';
import AddersVue from '@/components/Adders.vue'
export default {
   name:"detailpage-vue",
   components:{
      CategoryHeadVue,
      AddersVue,
   },
    data(){
        return {
          xiangying:{},
           current:0,
           productionLike:[],
           collectColor:"rgb(175, 167, 167)",
           collectText:"点击收藏",
           flag:false
        }
    },
    created(){
        this.qingqiu();
     //猜你喜欢
     axios.get("/api/pro/recommendlist")
    .then(res=>{
    if(res.data.code == 200){
      this.productionLike = res.data.data;
    }
    })

    },
    mounted(){
      window.addEventListener("scroll", this.handleScroll, true);
    },
    methods:{
        onChange(index) {
       this.current = index;
    },
    qingqiu(){
      axios.get(`/api/pro/detail/${this.$route.params.id}`)
      .then(res=>{
        if(res.status == 200 && res.data.code == 200){
             this.xiangying = res.data.data;
             this.$nextTick(()=>{
              let arr = this.$store.state.collectdata.find(item=>item.proid == this.xiangying.proid)
              if(arr){
                this.collectText="已收藏",
                this.collectColor="red"
               this.flag=true;
             
              }else{
                this.collectText="点击收藏",
              this.collectColor="rgb(175, 167, 167)"
              this.flag=false;
              }
             })
        }
    })
    //猜你喜欢
    },
    goGoodsDetail(val){
      this.$router.replace(`/DetailPage/${val}`)
      this.qingqiu();
    },
    // 加入购物车
    add(){
     axios.post("/api/cart/add",`userid=${localStorage.getItem("userid")}&proid=${this.$route.params.id}&num=1`)
    },

    collect(n){
      if(!this.flag){
        this.collectText="已收藏",
        this.collectColor="red"
        this.flag=true;
        //此处是点击收藏，将此页面的详情产品存放到store-collectdata中
        this.$store.commit("changecollectdata",{
          what:"y",
          who:n
        })
      }else{
        this.collectText="点击收藏",
        this.collectColor="rgb(175, 167, 167)"
        this.flag=false;
        //取消收藏
        this.$store.commit("changecollectdata",{
          what:"no",
          who:n
        })
      }
    }
    }
}
</script>
<style scoped>
.detail{
   display: flex;
   flex-direction: column;
   height: 100%;
}
main{
   flex:1;
   overflow: auto;
}
.up{
      height:22rem;
      background-color: #fff;
      border-radius: 0px 0px .5rem .5rem;
   }
 .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    
  }
  #head{
   width: 100%;
   background: transparent;
   position: absolute;
   top:0;
   left:0;
   color: black;
   border-top: none;
  }
  .head-img{
   width: 100%;
   height:17rem;
  }
  .custom-indicator{
   width: 3rem;
   height: 1rem;
   background-color: rgba(128, 128, 128, 0.568);
   text-align: center;
   line-height: 1rem;
   position: absolute;
   right: 0;
   bottom: 2rem;
   border-radius: .5rem 0px 0px .5rem;
   color: white;
   
  }
  .custom-indicator span{
   font-size: .75rem;
   font-weight: 700;
  }
  hgroup{
   display: flex;
   justify-content: space-between;
   padding: 0px .5rem;
   height: 1.8rem;
   line-height: 2rem;
   align-items: bottom;
   margin-bottom: .5rem;
  }
  .price{
   font-size:1.2rem;
   color: #f66;
  }
  .sale{
   font-size: .6rem;
   line-height: 2.5rem;
  }
  .brand{
   background-color: red;
   color: white;
   text-align: center;
   font-size: .7rem;
   font-weight: 700;
  }
  .category{
   background-color: rgb(49, 49, 222);
   text-align: center;
   color: white;
   font-size: .7rem;
   margin-left: .5rem;
   font-weight: 700;
  }
  .title{
   font-size: .8rem;
   font-weight: 700;
  }
  .xinxi{
   box-sizing: border-box;
   padding: 0px .5rem;
  }
  .adders{
   margin-top: .5rem;
  }
  .like{
   /* min-height: 15rem; */
   background-color: #fff;
   margin-top: .75rem;
  }
  .cai{
   height: 1rem;
   box-sizing: border-box;
   padding: .75rem;
  }
  .detail-box{
width: 100%;
  font-size: 14px;
  column-count: 2;
  column-gap: 5px;
  }
  .detail-box div {
  width: 100%;
  text-align: center;
  break-inside: avoid;
  background-color: white;
  margin-bottom: .25rem;
  border-radius: .5rem;
  box-sizing: border-box;
  padding: .25rem;
}
.detail-box div img {
  width: 90%;

}

.title-like {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  font-size: .7rem;
  font-weight: 400;
}

.price {
  text-align: left;
  font-size: .8rem;
  font-weight: 400;
}
</style>